<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <body>
        <ui:composition template="../templates/default3.xhtml">         
            <ui:define name="content">
                <h:form id="addCustomer" binding="#{customerManagerBean.loadAddCustomer}">

                    <p:panel header="Customer information" id="addCustomer1">
                        <p:messages id ="error"/>

                        <font class="fieldNote">* - Mandatory Field<br/><br/></font> 
                        <table>
                            <tr>
                                <td width ="80px">Employee:</td>
                                <td width="200px"> 
                                    <h:outputText id="userId" value="#{customerManagerBean.userId}">                                
                                    </h:outputText>
                                </td>
                            </tr>
                            <tr>
                                <td>Email:</td>
                                <td width="200px"> 
                                    <p:inputText required="true" id="email" requiredMessage="Email Required" value="#{customerManagerBean.email}" validatorMessage="Invalid Email Address Format">
                                        <f:validateRegex pattern="^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$" />
                                    </p:inputText>
                                    <font class="fieldNote">*</font>
                                </td>
                                <td width="80px">Company:</td>
                                <td> 
                                    <p:inputText required="true" id="company" requiredMessage="Company Required" value="#{customerManagerBean.company}" >
                                    </p:inputText> 
                                    <font class="fieldNote">*</font>
                                </td>
                            </tr>      
                            <tr>
                                <td>First Name:</td>
                                <td> 
                                    <p:inputText required="true" id="fname" requiredMessage="First Name Required" value="#{customerManagerBean.firstName}"> 
                                    </p:inputText> 
                                    <font class="fieldNote">*</font>
                                </td>
                                <td>Title:</td>
                                <td>                                                                                
                                    <p:inputText required="true" id="title" requiredMessage="Title Required" value="#{customerManagerBean.title}" >
                                    </p:inputText> 
                                    <font class="fieldNote">*</font>
                                </td>
                            </tr>
                            <tr>
                                <td>Last Name:</td>
                                <td> 
                                    <p:inputText required="true" id="lname" requiredMessage="Last Name Required" value="#{customerManagerBean.lastName}"> 
                                    </p:inputText> 
                                    <font class="fieldNote">*</font>
                                </td>
                                <td>Industry:</td>
                                <td>
                                    <h:selectOneMenu id="industry" value="#{customerManagerBean.industry}">
                                        <f:selectItem id="HC" itemLabel="Health care" itemValue="Health care" />
                                        <f:selectItem id="Hospitality" itemLabel="Hospitality" itemValue="Hospitality" />
                                        <f:selectItem id="Entertainment" itemLabel="Entertainment" itemValue="Entertainment" />
                                        <f:selectItem id="Recreation" itemLabel="Recreation" itemValue="Recreation" />
                                        <f:selectItem id="Retail" itemLabel="Retail" itemValue="Retail" />
                                        <f:selectItem id="FB" itemLabel="Food and Beverage" itemValue="Food and Beverage" />
                                    </h:selectOneMenu>
                                    <font class="fieldNote">*</font>
                                </td>
                            </tr>
                            <tr>
                                <td>Telephone:</td>
                                <td>                                                                                
                                    <p:inputText label="Telephone" required="true" id="phone" requiredMessage="Telephone Required" value="#{customerManagerBean.phone}" validatorMessage="Telephone Must Have a Minimum of 8 Digits">
                                        <f:validateLength minimum="8"/>
                                    </p:inputText>
                                    <font class="fieldNote">* Min. 8</font>
                                </td>
                                <td>Type:</td>
                                <td>
                                    <h:selectOneMenu id="status" value="#{customerManagerBean.type}">
                                        <f:selectItem id="Customer" itemLabel="Customer" itemValue="Customer" />
                                        <f:selectItem id="Competitor" itemLabel="Competitor" itemValue="Competitor" />
                                        <f:selectItem id="Investor" itemLabel="Investor" itemValue="Investor" />
                                        <f:selectItem id="Partner" itemLabel="Partner" itemValue="Partner" />
                                        <f:selectItem id="Prospect" itemLabel="Prospect" itemValue="Prospect" />
                                        <f:selectItem id="Other" itemLabel="Other" itemValue="Other" />                   
                                    </h:selectOneMenu>
                                    <font class="fieldNote">*</font>
                                </td>
                            </tr>
                        </table>
                    </p:panel>
                    <p:panel header="Company Address" id="addCustomer2">
                        <table>
                            <tr>
                                <td width ="80px" valign="top" > Street:</td>
                                <td width="205px" valign="top"> 
                                    <table><tr><td><p:inputTextarea id="street" required="true" requiredMessage="Street Required" style="width:160px;height:60px;" maxHeight="60" effectDuration="400" value="#{customerManagerBean.street}">
                                                </p:inputTextarea></td><td> <font class="fieldNote">*</font></td></tr></table>

                                </td>
                                <td width="80px">City: <br/><br/> Country: </td>
                                <td width="200px">
                                    <p:inputText  required="true" requiredMessage="City Required" id="city" value="#{customerManagerBean.city}">
                                    </p:inputText>
                                    <font class="fieldNote">*</font>
                                    <br/><br/>
                                    <p:inputText required="true" requiredMessage="Country Required" id="country" value="#{customerManagerBean.country}">
                                    </p:inputText>
                                    <font class="fieldNote">*</font>
                                </td>
                            </tr>
                            <tr>
                                <td valign ="top" >Postal: </td>
                                <td width="200px" valign ="top"> 
                                    <p:inputText label="Postal" required="true" requiredMessage="Postal Required" id="postal" value="#{customerManagerBean.postal}" validatorMessage="Postal Code Must Have a Minimum of 4 Digits and Maximum of 8 Digits">
                                        <f:validateLength minimum="4" maximum="11"/>
                                    </p:inputText>
                                    <font class="fieldNote">* Min. 4 , Max. 11</font> 
                                </td>
                            </tr>
                        </table>
                    </p:panel>
                    <p:panel header="Shipping address" id="addCustomer3">
                        <p:dataTable id="AddressS" var="address" value="#{customerManagerBean.shippingAddresses}" paginator="false" 
                                     emptyMessage="No address found with given criteria." >                               
                            <p:column headerText="Street"> 
                                <h:outputText value="#{address.street}" />                                             
                            </p:column> 
                            <p:column headerText="Postal Code"> 
                                <h:outputText value="#{address.postal}" />                                             
                            </p:column> 
                            <p:column headerText="City"> 
                                <h:outputText value="#{address.city}" />                                             
                            </p:column> 
                            <p:column headerText="Country"> 
                                <h:outputText value="#{address.country}" />                                             
                            </p:column> 
                        </p:dataTable>
                        
                        <table class="table-submit">
                            <tr>
                                <td align="center"><hr/>
                                    <p:commandButton id="btnAddS" value="Edit shipping address" actionListener="#{customerManagerBean.addSAdddress}"  update="error" ajax="true" /> 
                                </td>
                            </tr>
                        </table>
                        
                    </p:panel>
                    <p:panel header="Billing address" id="addCustomer4">
                        <p:dataTable id="AddressB" var="address" value="#{customerManagerBean.billingAddresses}" paginator="false"                                     
                                     emptyMessage="No address found with given criteria.">     
                            <p:column headerText="Street"> 
                                <h:outputText value="#{address.street}" />                                             
                            </p:column> 
                            <p:column headerText="Postal Code"> 
                                <h:outputText value="#{address.postal}" />                                             
                            </p:column> 
                            <p:column headerText="City"> 
                                <h:outputText value="#{address.city}" />                                             
                            </p:column> 
                            <p:column headerText="Country"> 
                                <h:outputText value="#{address.country}" />                                             
                            </p:column> 
                        </p:dataTable>
                        <table class="table-submit">
                            <tr>
                                <td align="center"><hr/>
                                    <p:commandButton id="btnAddB" value="Edit billing address" actionListener="#{customerManagerBean.addBAddress}"  update="error" ajax="true" /> 
                                </td>
                            </tr>
                        </table>
                        
                    </p:panel>
                    <p:panel header="Remark (Optional)" id="addCustomer5">
                        <table>
                            <tr>
                                <td width ="80px" valign="top"> Description:</td>
                                <td width="200px" valign="top"> 
                                    <p:inputTextarea id="description" style="width:160px;height:80px;" maxHeight="80" effectDuration="400" value="#{customerManagerBean.description}">

                                    </p:inputTextarea>   
                                </td>
                                <td width="80px">Annual revenue: <br/><br/> No. of Employee:</td>
                                <td width="200px">
                                    <p:inputText  label="Anuual Revenue" id="revenue" value="#{customerManagerBean.revenue}">
                                        <f:convertNumber type="number" />
                                    </p:inputText>
                                    <br/><br/>
                                    <p:inputText label="No. Of Employee" id="no_emp" value="#{customerManagerBean.numEmployee}">
                                        <f:convertNumber type="number" />
                                    </p:inputText>
                                </td>
                            </tr>
                        </table>
                    </p:panel>
                    <table class="panel">
                        <tr>
                            <td  class="btn" ><hr/>
                                <p:commandButton id="btnAddCustomer" value="Create Customer" actionListener="#{customerManagerBean.addCustomer}" update="error" ajax="true" />
                            </td>
                        </tr>
                    </table>
                </h:form>
            </ui:define>        
        </ui:composition>
    </body>
</html>
